import React, { useEffect, useState } from 'react'
import { backgroundObj } from '@/utils/utils';
import { useDidShow, getCurrentInstance } from '@tarojs/taro'
import { fetchPageConfigDetailForUser } from '@/server/shop';
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import ComponentsRender from './components/components.config'
import Router from '@/utils/router'
import './index.scss'
const MicroPage = (props) => {
    const [data, setData] = useState({})
    const { params } = getCurrentInstance().router
    const { id } = params
    console.log(data)
    useEffect(() => {
        const { title } = data
        if (title) {
            Taro.setNavigationBarTitle({
                title: title
            })
        }

    }, [data])
    useDidShow(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        fetchPageConfigDetailForUser({
            pageType: "normal",
            id: id
        }).then((e = {}) => {
            const { id, pageConfig = '{}' } = e
            if (id) {
                const config = JSON.parse(pageConfig)
                setData(config)
            } else {

            }
        })
    }

    const { backgroundType, backgroundColor, backgroundRepeat, fontColor, backgroundImage, list = [] } = data
    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }
    const linkGo = (data = {}) => {
        console.log(222)
        const { linkType, linkSrc, linkData = {} } = data
        if (linkType === 'customize') {
            Router('webView', {
                args: {
                    src: linkSrc
                },
            })
        } else if (linkType === 'shop') {
            const { id } = linkData
            Router('shopDetail', {
                args: {
                    goodsId: id
                },
            })
        } else if (linkType === 'wepage') {
            const { id } = linkData
            Router('wxPageInfo', {
                args: {
                    id: id
                },
            })
        }
    }
    const linkGoShop = (data = {}) => {
        const { linkType, list } = data
        if (!linkType) {
            console.log(list, '1231331')
            Taro.setStorageSync('shopList', list)
            Router('shopList')
        }
        else {
            linkGo(data)
        }
    }
    return <View style={{ ...renderBg(), backgroundRepeat, color: fontColor }} className='MicroPage_box'>
        {list.map((item, index) => {
            const { type } = item
            if (type === 'swiper') {
                const RenderDom = ComponentsRender['Swiper']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'navigation') {
                const RenderDom = ComponentsRender['Navigation']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'search') {
                const RenderDom = ComponentsRender['Search']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'displayAdvertising') {
                const RenderDom = ComponentsRender['DisplayAdvertising']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'richText') {
                const RenderDom = ComponentsRender['RichText']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'announcement') {
                const RenderDom = ComponentsRender['Announcement']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'contactCustomer') {
                const RenderDom = ComponentsRender['ContactCustomer']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'audio') {
                const RenderDom = ComponentsRender['Audio']
                return <RenderDom linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'video') {
                const RenderDom = ComponentsRender['Video']
                return <RenderDom videoKey={index.toString()} linkGo={linkGo} key={index} data={item}></RenderDom>
            }
            else if (type === 'shop') {
                const RenderDom = ComponentsRender['Shop']
                return <RenderDom linkGo={linkGoShop} key={index} data={item}></RenderDom>
            }
            else if (type === 'form') {
                const RenderDom = ComponentsRender['Form']
                return <RenderDom key={index} data={item}></RenderDom>
            }
            else if (type === 'secondKill') {
                const RenderDom = ComponentsRender['SecondKill']
                return <RenderDom key={index} data={item}></RenderDom>
            }
            else {
                return null
            }
        })}
    </View>
}
export default MicroPage
